<template>
    <div class="form">
        <el-form
            label-position="right"
            label-width="100px"
            :model="form"
            ref="myform"
            class="formbox"
        >
            <el-form-item 
                label="用户名称" 
                prop="username"
                
                :rules="[
                    {required: true, message: '用户名称必填'}
                ]"
            >
                <el-input clearable v-model="form.username"  :prefix-icon="User" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item 
                label="登录密码"
                prop="password"
                
                :rules="[
                    {required: true, message: '登录密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ]"
            >
                <el-input clearable v-model="form.password" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入密码" />
            </el-form-item>

            <el-form-item class="lastitem">
                <div class="alinks">
                    <router-link  class="litem" :to="{name:'register'}">没有账号,去注册!</router-link>
                    <router-link  class="litem bg" :to="{name:'forgetpass'}">忘记密码</router-link>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button block type="success" class="btnblock" @click="submitForm">登录</el-button>
                <el-button block type="warning" class="btnblock" @click="resetFields">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
import { onMounted, reactive,toRefs , getCurrentInstance,ref } from 'vue'
import {reg} from "@/utils/validate"
import {UserFilled,Lock,User} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus"
import {ajax} from "@/api"
import { useRouter } from 'vue-router'
export default {
    setup(props){
        const myform = ref()
        const router = useRouter()
        const state = reactive({
            form:{},
            reg:reg,
            UserFilled,
            Lock,
            User
        })
        const {proxy} = getCurrentInstance()
        onMounted(()=>{
            console.log(proxy.$root.$route )  // 获取query this.$route 
            const {username} = proxy.$root.$route.query;
            if(username){
                state.form = {...state.form,username }
            }else{
                state.form = {...state.form,username:localStorage.getItem('username')  }
            }
        })
        const submitForm = ()=>{
            myform.value.validate(async valid=>{
                if(valid){
                    // 调取接口  
                    let {code,result,token } = await ajax.login(state.form)
                    if(code==200){
                        // 存储token 
                        sessionStorage.setItem("token",token)  
                        router.push({name:'main'})
                        localStorage.setItem('username',state.form.username)
                    }
                }else{
                    ElMessage.error('登录信息有误')
                }
            })
        }
        const resetFields = ()=>{
            myform.value.resetFields()
        }

        return {
            ...toRefs(state),
            resetFields,
            myform,
            submitForm
        }
    }
}
</script>